<html>
    <head>
        <title>模块系统</title>
    </head>
    <body>
        <script>
            // 四、模块系统
                              /*
                                  如果你没有通过 import/require 使用一个模块系统，也许可以暂且跳过这个章节。
                                  如果你使用了，那么我们会为你提供一些特殊的使用说明和注意事项》
                              */

                              // 1、在模块系统中局部注册
                                      /*
                                          如果你还在阅读，说明你使用了诸如Babel 和 webpack 的模块系统。
                                          在这些情况下，我们推荐创建一个 components目录，且将每个组件放置在其各自的文件中。

                                          然后你需要在局部注册之前导入每个你想要使用的组件。                                          
                                      */
                                           // ComponentB.vue 中：
                                                  import ComponentA from './ComponentA';
                                                  import ComponentC from './ComponentB';

                                                  export default{
                                                      components:{
                                                        ComponentA,
                                                        ComponentC
                                                      }
                                                  }

                                            // 现在，ComponentA 和 ComponentC 都可以在ComponentB 的模块中使用了。


                               // 2、 基础组件的自动化全局注册
                                           /*
                                              可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相同通用的。

                                              我们有时候会把它们成为 "基础组件" ，它们会在各个组件中被频繁的用到。
                                           */

                                           // 于是，就会导致很多组件里都会有一个包含基础组件的长列表

                                                /*
                                                      import BaseButton from  './BaseButton.vue'
                                                      import BaseIcon from './BaseIcon.vue'
                                                      import BaseInput from './BaseInput.vue'

                                                      export default{
                                                          components:{
                                                              BaseButton,
                                                              BaseIcon,
                                                              BaseInput

                                                          }
                                                      }
                                                */
                                            // 然而在模板中只是用了一个很小的部分   
                                                  /*
                                                      <BaseInput
                                                        v-model="searchText"
                                                        @keydown.enter="search"
                                                      />
                                                      <BaseButton @click="search">
                                                        <BaseIcon name="search"/>
                                                      </BaseButton>
                                                  */  
                                                 
                                            /*
                                                如果你恰好使用了webpack，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。

                                                这里有一份可以让你在应用入口文件(比如 src/main.js)中全局导入基础组件的示例代码:
                                            */
        </script>
    </body>
</html>